<template>
	<view class="container">
		<view id='header'>
			<view class="header">
				<qualificationAddStep step="4" />
			</view>
			<view class="tabs u-p-t-20">
				<u-tabs lineColor="#6072FF" :list="listTab" @click="clickTab"></u-tabs>
			</view>
		</view>

		<view class="main">
			<scroll-view scroll-y :style="[{height: height + 'px'}]" lower-threshold="200" v-if="list.length > 0">
				<view class="card" v-for="(item,index) in list" :key="index">
					<view class="logo-zfb logo" v-if="item.certificationChannels==0">
						<image :src="`${baseStaticFileUrl}/image/my/zfb-logo.png`" /><text>支付宝</text>
					</view>
					<view class="logo-wx logo" v-else-if="item.certificationChannels==1">
						<image :src="`${baseStaticFileUrl}/image/my/wx-logo.png`" /><text>微信</text>
					</view>
					<text class="title" v-if="param.appState==1">已认证</text>
					<view v-else-if="param.appState==0">
						<view v-if="item.merchantId">
							<text class="title"
								v-if="item.aliApplymentState == merchantAliEnum.AUDIT_REJECT || item.weChatApplymentState == merchantWechatEnum.APPLYMENT_STATE_REJECTED">
								审核失败
							</text>
							<text class="title"
								v-else-if="item.aliApplymentState == merchantAliEnum.CANCELED || item.weChatApplymentState == merchantWechatEnum.APPLYMENT_STATE_CANCELED">
								已撤销
							</text>
							<text class="title"
								v-else-if="item.aliApplymentState == merchantAliEnum.AUDITING || item.weChatApplymentState == merchantWechatEnum.APPLYMENT_STATE_WAITTING_FOR_AUDIT">
								审核中
							</text>
							<text class="title" v-else>
								待认证
							</text>
						</view>
					</view>
					<view class="info">
						<view class="info-box">
							<view>
								<view class="item-info">
									<view class="info-title">商户名称:</view>
									<text>{{item.merchantName}}</text>
								</view>
								<view class="item-info">
									<view class="info-title">实名人员:</view>
									<text>{{item.realName}}</text>
								</view>
							</view>
							<!-- 印章效果 -->
							<view class="seal" v-if="param.appState==1">
								<view class="seal-son">
									<span class="seal-span">已认证</span>
								</view>
							</view>
							<view class="qr-code-container" v-if="param.appState==0">
								<u--image v-if="item.qrcodeData && item.certificationChannels==1" :showLoading="true"
									:src="item.qrcodeData" width="177rpx" height="177rpx" mode="aspectFill" />
								<u--image v-if="item.aliQrcode && item.certificationChannels==0" width="177rpx"
									height="177rpx" :showLoading="true" :src="item.aliQrcode" bgColor="#FFFFFF"
									mode="aspectFill" />
							</view>
						</view>
						<view class="item-info" v-if="item.merchantId">
							<view class="info-title">渠道商户号:</view>
							<text>{{item.merchantId}}</text>
							<u-button type="primary" text="复制"
								:customStyle="{marginLeft:'10rpx',fontSize: '2rpx',width: '75rpx',height: '40rpx',borderRadius: '30rpx'}"
								@click="copyCode(item.merchantId)" />
						</view>
						<view class="item-info" v-if="param.appState==0">
							<view class="info-title">认证提示:</view>
							<text style="color:red">{{item.certificationChannels==0?' 请支付宝扫码完成认证':'请微信扫码完成认证'}}</text>
						</view>
						<!--            <view class="item-info" v-if="param.appState==0 && item.failReason">-->
						<!--              <view class="info-title">失败原因:</view>-->
						<!--              <text style="width: 440rpx;word-wrap : break-word ;">{{item.failReason}}</text>-->
						<!--            </view>-->
					</view>

					<view class="tips"
						v-if="item.weChatApplymentState==merchantWechatEnum.APPLYMENT_STATE_WAITTING_FOR_AUDIT || item.aliApplymentState==merchantAliEnum.AUDITING">
						<u-line></u-line>
						<view style="margin-top: 10rpx;">
							<u--text type="warning" text="提示: 资料审核预计需要1-7个工作日，请您耐心等待!"></u--text>
						</view>
					</view>
				</view>
				<view class="footer" id="footer">
					<view class="the-notice-container">
						<view class="the-notice-title">温馨提示</view>
						<view class="the-notice-box">
							<view class="blue-yuan"></view>
							<text class="text">支付宝认证：截图或长按二维码保存后到支付宝APP扫一扫中使用。</text>
						</view>
						<view class="the-notice-box">
							<view class="blue-yuan"></view>
							<text class="text">微信认证：截图或长按二维码进入【微信支付商家助手】中使用。</text>
						</view>
						<view class="the-notice-box">
							<view class="blue-yuan"></view>
							<text class="text">为免影响您的收款，请尽快扫码完成实名认证。</text>
						</view>
						<view class="the-notice-box">
							<view class="blue-yuan"></view>
							<text class="text">如您已经实名签约，等待15分钟即可进行收款。</text>
						</view>
					</view>
				</view>
			</scroll-view>
			<view :style="[{height: height + 'px'}]" style="display: flex;align-items: center;justify-content: center"
				v-else>
				<u-empty text='暂无实名信息' mode="data" icon="http://cdn.uviewui.com/uview/empty/list.png"></u-empty>
			</view>
		</view>
	</view>
</template>

<script>
	import qualificationAddStep from '@/components/qualification-add-step/qualification-add-step';
	export default {
		components: {
			qualificationAddStep
		},
		data() {
			return {
				baseStaticFileUrl: this.$configPath.staticFileUrl,
				height: 0,
				param: {
					pageNum: 1,
					type: 1,
					appState: 0,
				},
				list: [],
				listTab: [{
					name: '待认证',
				}, {
					name: '已认证',
				}],
				loadStatus: false,
				merchantAliEnum: this.$merchantAliEnum,
				merchantWechatEnum: this.$merchantWechatEnum,
			}
		},
		onReady() {

		},
		onLoad() {
			this.list = [];
			this.listLoad();
		},
		onPullDownRefresh() {
			this.overloadData();
		},
		mounted() {
			const query = uni.createSelectorQuery().in(this);

			query.select('#header').boundingClientRect();
			query.exec(res => {
				this.height = wx.getSystemInfoSync().windowHeight;
				for (var i = 0; i < res.length; i++) {
					if (res[i]) {
						this.height -= res[i].height;
					}
				}
				this.height = this.height - 44;
			});
		},

		methods: {
			base64(wxQrcode) {
				return `data:image/png;base64,${wxQrcode}`;
			},
			copyCode(value) {
				uni.setClipboardData({
					data: value,
					success: () => {
						uni.showToast({
							title: "复制成功"
						})
					}
				});
			},
			listLoad() {
				uni.showLoading({
					title: '加载中...',
					mask: true
				});
				this.list = [];
				this.$api('merchant.findMerchantNameInfo', this.param).then(res => {
					uni.hideLoading();
					uni.stopPullDownRefresh();
					if (res.status == 0) {
						if (this.param.appState == 0) {
							res.data.forEach((item, index) => {
								if (!uni.$u.test.isEmpty(item.merchantId)) {
									if (item.certificationChannels == 0) {
										if (item.aliApplymentState == this.merchantAliEnum.AUDIT_REJECT ||
											item.aliApplymentState == this.merchantAliEnum.CANCELED ||
											(uni.$u.test.isEmpty(item.aliQrcode) && (item
												.aliApplymentState == this.merchantAliEnum
												.AUDIT_FREEZE || item.aliApplymentState == this
												.merchantAliEnum.AUDITING) || uni.$u.test.isEmpty(item
												.aliApplymentState))) {
											//绘画的二维码不能为空 否则会出现数据不渲染（控制无报错打印）
											if (!uni.$u.test.isEmpty(item.channelCode)) {
												item.aliQrcode = this.$mQrCode.createQrCodeImg(item
													.channelCode, {
														size: parseInt(300) //二维码大小
													})
											}
										} else if (!uni.$u.test.isEmpty(item.aliQrcode)) {
											item.aliQrcode = this.base64(item.aliQrcode)
										}
									}
									if (item.certificationChannels == 1) {
										if (item.weChatApplymentState == this.merchantWechatEnum
											.APPLYMENT_STATE_CANCELED || item.weChatApplymentState == this
											.merchantWechatEnum.APPLYMENT_STATE_REJECTED ||
											(uni.$u.test.isEmpty(item.qrcodeData) && (item
													.weChatApplymentState == this.merchantWechatEnum
													.APPLYMENT_STATE_FREEZED) || item
												.weChatApplymentState == this.merchantWechatEnum
												.APPLYMENT_STATE_WAITTING_FOR_AUDIT) || uni.$u.test
											.isEmpty(item.weChatApplymentState)) {
											//绘画的二维码不能为空 否则会出现数据不渲染（控制无报错打印）
											if (!uni.$u.test.isEmpty(item.channelCode)) {
												item.qrcodeData = this.$mQrCode.createQrCodeImg(item
													.channelCode, {
														size: parseInt(300) //二维码大小
													})
											}
										} else if (!uni.$u.test.isEmpty(item.qrcodeData)) {
											item.qrcodeData = this.base64(item.qrcodeData) //微信需要转base64
										}
									}
								}
							})
						}
						this.list = res.data;
					} else {
						getApp().err("请求不成功：" + res.msg);
					}
					this.loadStatus = false;
				}).catch(() => {
					uni.stopPullDownRefresh();
					this.loadStatus = false;
					uni.hideLoading();
				});
			},
			// 重新刷数据
			overloadData(type) {
				this.param.pageNum = 1;
				this.list = [];
				this.listLoad(type);
			},
			clickTab(e) {
				if (this.loadStatus) {
					return;
				}
				if (this.param.appState === e.index) {
					return;
				}
				this.loadStatus = true;
				this.param.appState = e.index
				this.listLoad();
			},
		}
	}
</script>

<style lang="scss">
	/deep/ .u-text__value {
		font-size: 24rpx !important;
	}

	.container {
		#header {
			background-color: $uni-bg-color;
		}

		.seal {
			width: 130rpx;
			height: 130rpx;
			top: -50rpx;
			left: -50rpx;
			border: solid 6rpx #00C853;
			border-radius: 100%;
			background-color: rgba(255, 255, 255, 0.5);
			position: relative;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.seal-son {
			width: 115rpx;
			height: 115rpx;
			border: solid 2rpx #00C853;
			border-radius: 100%;
			background-color: rgba(255, 255, 255, 0.5);
			position: relative;

			.seal-span {
				position: absolute;
				top: 40rpx;
				text-align: center;
				font-size: 28rpx;
				transform: rotate(-35deg);
				right: 17rpx;
				color: #00C853;
				font-weight: 900;
			}
		}

		.blue-yuan {
			width: 10rpx;
			height: 10rpx;
			background: rgb(96, 114, 255);
			border-radius: 50%;
			margin-top: 16rpx;
		}

		.header {
			display: flex;
			flex-direction: column;
			background-color: white;
			text-align: center;
		}

		.main {
			.card {
				background-color: white;
				margin: 20rpx 26rpx;
				padding: 20rpx 28rpx 15rpx 28rpx;
				border-radius: 25rpx;
				box-sizing: border-box;

				.title {
					font-size: 32rpx;
					font-weight: bold;
				}

				.info {
					display: flex;
					justify-content: space-between;
					flex-direction: column;
					font-size: 26rpx;
					margin-top: 20rpx;

					.info-box {
						display: flex;
						justify-content: space-between;
						align-items: center
					}

					.item-info {
						display: flex;
						align-items: baseline;
						padding: 10rpx 0;

						.info-title {
							width: 170rpx;
						}
					}

					.qr-code-container {
						position: relative;
						top: -80rpx;
					}
				}

				.tips {
					margin-top: 20rpx;
				}

				.logo {
					position: relative;
					top: -20rpx;
					left: -28rpx;
					display: flex;
					align-items: center;
					color: white;
					height: 45rpx;
					text-align: center;
					font-size: 26rpx;
					padding: 0 15rpx;
					border-radius: 25rpx 0 25rpx 0;
					width: fit-content;

					image {
						width: 30rpx;
						height: 30rpx;
						margin-right: 10rpx;
					}
				}

				.logo-zfb {
					background-color: #009FE8;

				}

				.logo-wx {
					background-color: #28C445;

				}
			}
		}

		.u-tabs {
			padding: 0 $u-padding-medium;

		}

		.footer {
			padding: 20rpx 20rpx 50rpx;
		}

		.the-notice-container {

			.the-notice-box {
				display: flex;
				align-items: flex-start;
				color: #a0a0a1;
				font-size: 26rpx;

				/deep/ .u-transition {
					margin-top: 10rpx;
				}

				.text {
					margin-left: 20rpx;
				}

				margin-top: 10rpx;
			}

			.the-notice-title {
				margin: 20rpx 10rpx 0;
				color: #49494a;
			}
		}
	}
</style>